<template>
    <div class="message">
        <div class="right">
            <el-button plain @click="dialogVisible = true" class="addButton">添加</el-button>
        </div>
        <h4>当前乘车人</h4>
            <p class="m" v-if="loading1">
                <p>
                    姓名：{{ master.name }}
                </p>
                <p>性别：{{ master.sex==1?"男":"女" }}</p>
                <p>证件类型：{{ master.idType }}</p>
                <p>证件号码：{{ master.mask() }}</p>
                <p>电话号码：{{ master.phone }}</p>
                <p>
                    <el-button @click="updateButton(master)" class="pButton">修改</el-button>
                    <!-- <el-button @click="del(master)" class="pButton">删除</el-button> -->
                </p>
            </p>
        <h4>其他乘车人</h4>
        <div v-for="(stu,index) in passenger" :key="index" v-if="loading2&&passengerNum-1">
            <p class="m" v-if="judge(stu)">
                <p>
                    姓名：{{ stu.name }}
                </p>
                <p>性别：{{ stu.sex==1?"男":"女" }}</p>
                <p>证件类型：{{ stu.idType }}</p>
                <p>证件号码：{{ stu.mask() }}</p>
                <p>电话号码：{{ stu.phone }}</p>
                <p>
                    <el-button @click="updateButton(stu)" class="pButton">修改</el-button>
                    <el-button @click="del(stu)" class="pButton">删除</el-button>
                </p>
            </p>
        </div>
        <div v-else>
            <p class="null">暂未填入其他乘车人信息</p>
        </div>
        <el-dialog v-model="dialogVisible" title="请输入乘车人信息" width="500" @close="beforeClose()">
            <span>
                <el-form label-width="auto" style="max-width: 600px" :rules="rules" ref="ruleFormRef" :model="ruleForm">
                    <el-form-item label="姓名" prop="name">
                        <el-input v-model="ruleForm.name" />
                    </el-form-item>
                    <el-form-item label="性别" prop="gender">
                        <el-radio-group v-model="ruleForm.gender">
                            <el-radio value=1>男</el-radio>
                            <el-radio value=2>女</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="证件类型">
                        <el-input :value="ruleForm.idType" disabled />
                    </el-form-item>
                    <el-form-item label="证件号码" prop="idNum">
                        <el-input v-model="ruleForm.idNum" />
                    </el-form-item>
                    <el-form-item label="电话号码" prop="telNum">
                        <el-input v-model="ruleForm.telNum" />
                    </el-form-item>
                </el-form>
            </span>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="cancel(ruleFormRef)" style="background-color: aqua !important; color: white !important;">取消</el-button>
                    <el-button type="primary" @click="submit(ruleFormRef)" style="background-color: aqua !important; color: white !important;">提交</el-button>
                </div>
            </template>
        </el-dialog>


        <el-dialog v-model="dialogVisible1" title="请修改乘车人信息" width="500" @close="beforeClose()">
            <span>
                <el-form label-width="auto" style="max-width: 600px" ref="ruleFormRef" :model="currentPassenger">
                    <el-form-item label="姓名">
                        <el-input :value="currentPassenger.name" disabled/>
                    </el-form-item>
                    <el-form-item label="性别">
                        <el-input :value="currentPassenger.sex === 1 ? '男' : '女'" disabled/>
                    </el-form-item>
                    <el-form-item label="证件类型">
                        <el-input :value="currentPassenger.idType" disabled/>
                    </el-form-item>
                    <el-form-item label="证件号码">
                        <el-input :value="currentPassenger.mask()" disabled/>
                    </el-form-item>
                    <el-form-item label="电话号码" prop="telNum">
                        <el-input v-model="currentPassenger.phone"/>
                    </el-form-item>
                </el-form>
            </span>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="cancel(ruleFormRef)" style="background-color: #0086f6 !important; color: white !important;">取消</el-button>
                    <el-button type="primary" @click="submit1(ruleFormRef)" style="background-color: #0086f6 !important; color: white !important;">提交</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts" name="Message">
import type { FormInstance,FormRules } from 'element-plus';
import { ElMessage } from 'element-plus';
import { ElMessageBox } from 'element-plus';
import axios from 'axios';
import {ref,reactive} from 'vue';
import { useRouter } from 'vue-router';
import {useRoute} from 'vue-router'
const route=useRoute();
//数据
const username = route.query.account;
const url = `http://localhost:8080/identity/${username}`; 
const url1 = `http://localhost:8080/passenger/${username}`;
class Message{
    name:string="";//姓名
    gender:number;//性别
    idType:string="中国居民身份证";//证件类型
    idNum:string="";//证件号码
    telNum:string="";//电话号码

    constructor(name:string,gender:number,idType:string,idNum:string,telNum:string){
        this.name=name;
        this.gender=gender;
        this.idType=idType;
        this.idNum=idNum;
        this.telNum=telNum;
    }
}
const ruleFormRef = ref<FormInstance>()
interface RuleForm {
    name:string;
    gender:number;
    idType:string;
    idNum:string;
    telNum:string;
}
const ruleForm = reactive<RuleForm>({
    name:"",
    gender:0,
    idType:"中国居民身份证",
    idNum:"",
    telNum:""
})
const currentPassenger=ref<Passenger>();
let dialogVisible=ref<boolean>(false);
let dialogVisible1=ref<boolean>(false);
class Passenger{
    name:string="";//姓名
    sex:number;//性别
    idType:string="中国居民身份证";//证件类型
    idNumber:string="";//证件号码
    phone:string="";//电话号码

    constructor(name:string,gender:number,idNum:string,telNum:string){
        this.name=name;
        this.sex=gender;
        this.idNumber=idNum;
        this.phone=telNum;
    }

    mask():string{
        const maskedStr = `${this.idNumber.slice(0,2)}**************${this.idNumber.slice(16)}`;
        return maskedStr;
    }
}
let master=ref<Passenger>();
let passenger: Passenger[]=reactive([]);
// master.value=new Passenger("孙七",1,"110101199001010005","13800000005");
// let p1:Passenger=new Passenger("孙七",1,"110101199001010005","13800000005");
// let p2:Passenger=new Passenger("赵六",2,"110101199001010004","13800000004");
// passenger.push(p1);
// passenger.push(p2);
// console.log(passenger)
find();
let passengerNum=ref<number>(0);
let loading1=ref<boolean>(false);
let loading2=ref<boolean>(false);


const router = useRouter();
//方法
function find(){
    //获取当前乘车人信息
    axios.get(url)
    .then((response) => {
        // console.log("主人"+response.data)
        master.value=new Passenger(response.data.data.name,response.data.data.sex,response.data.data.idNumber,response.data.data.phone);
        // console.log(master.value);
        loading1.value=true;
    })
    .then(()=>{
        //获取其他乘车人信息
        getPassenger();
    })
}
//修改按钮
function updateButton(p:Passenger){
    currentPassenger.value = new Passenger(p.name, p.sex, p.idNumber, p.phone);
    dialogVisible1.value=true;
}
function submit1(form:FormInstance|undefined){
    if(!form) return;
    form.validate((valid, fields) => {  
        if (valid) {  
            dialogVisible1.value = false;
            const message=new Message(currentPassenger.value.name,currentPassenger.value.sex,currentPassenger.value.idType,currentPassenger.value.idNumber,currentPassenger.value.phone);
            //修改乘车人信息
            axios.put('http://localhost:8080/passenger',{
                    idNumber:message.idNum,
                    name:message.name,
                    sex:message.gender,
                    phone:message.telNum
                })
                .then((response) => {
                    if(response.data.code==1)
                        ElMessage.success({message:response.data.msg,showClose:true});
                    else
                        ElMessage.error({message:response.data.msg,showClose:true});
                })
                .then(()=>{
                    form.resetFields();
                    find();
                })
        }  
    });  
}
//删除按钮
const del = (p:Passenger) => {
    const idNumber=p.idNumber;
    const url2 = `http://localhost:8080/passenger/${idNumber}`; 
    axios.delete(url2)  
    .then(response => {  
        if(response.data.code==1)
            ElMessage.success({message:response.data.msg,showClose:true});
        else
            ElMessage.error({message:response.data.msg,showClose:true});
    })  
    .then(()=>{
        find();
    });
};
function judge(p:Passenger):Boolean{
    if(p.name==master.value.name)
        return false;
    else
        return true;
}
const rules = reactive<FormRules<RuleForm>>({
    name: [
        { required: true, message: '姓名不能为空', trigger: 'blur' }
    ],
    gender: [
    {
        required: true,
        message: '性别不能为空',
        trigger: 'change',
    }],
    idType: [
    {
        required: true,
        message: '证件类型不能为空',
        trigger: 'change',
    }],
    idNum: [
    {
        required: true,
        message: '证件号码不能为空',
        trigger: 'blur',
    }],
    telNum: [
    {
        required: true,
        message: '电话号码不能为空',
        trigger: 'change',
    }]
})
function getPassenger(){
    passenger.length=0;
    axios.get(url1)
    .then((response) => {
        response.data.data.forEach(item => {  
          passenger.push(new Passenger(item.name, item.sex, item.idNumber, item.phone));  
        });  
        passengerNum.value=passenger.length;
        loading2.value=true;
    })
}
function beforeClose(){
    if(ruleFormRef.value)
        ruleFormRef.value.resetFields();
}
function cancel(form:FormInstance|undefined){
    if (!form) return;
    form.resetFields();
    dialogVisible.value = false; 
    dialogVisible1.value = false;
}
function submit(form:FormInstance|undefined){
    if(!form) return;
    form.validate((valid, fields) => {  
        if (valid) {  
            dialogVisible.value = false;
            const message=new Message(ruleForm.name,ruleForm.gender,ruleForm.idType,ruleForm.idNum,ruleForm.telNum);
            //添加新的乘车人信息
            axios.post(url1,{
                    username:route.query.account,
                    idNumber:message.idNum,
                    name:message.name,
                    sex:message.gender,
                    phone:message.telNum
                })
                .then((response)=>{
                    if(response.data.code==1)
                        ElMessage.success({message:response.data.msg,showClose:true}); 
                    else
                        ElMessage.error({message:response.data.msg,showClose:true}); 
                })
                .then(()=>{
                    form.resetFields();
                    find();
                })
        }  
    });  
}
</script>


<style scoped>
.null{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: red;
    font-size: 30px;
}
.right{
    display: flex;  
    justify-content: flex-end; /* 将内容向右对齐 */
}
.m{
    border-radius: 15px;/*圆角*/
    background-color: #0086f6;
    color: white;
    padding: 10px 20px !important; /* 调整上下左右的内边距 */ 
    display: flex;            /* 使用 flexbox 布局 */  
    justify-content: space-between; /* 使内容均匀分布，按钮在右侧 */  
    align-items: center;      /* 确保内容垂直居中对齐 */  
    margin-bottom: 10px;      /* 添加底部间距，防止内容过于紧凑 */ 
}
.addButton{
    background-color: #0086f6 !important; 
    color: white !important;
}
.pButton{
    background-color: white !important;
    color: black !important;;
}
</style>